<template>
    <div class="appointment-con">
      <top-bar :title="topTitle"></top-bar>

      <div class="tab-nav">
        <a  @click="allTabAppoint" :class="status==0?'active':''">全部<span class="line" style="width: 30px;" v-if="status==0"></span></a>
        <!--<a  @click="paymentAppoint">待付款<span class="line" style="width: 30px;" v-if="status==1"></span></a>-->
        <a @click="successAppoint" :class="status==2?'active':''">预约成功<span class="line" style="width: 30px;" v-if="status==2"></span></a>
        <a @click="closeAppoint" :class="status==3?'active':''">已关闭<span class="line" style="width: 30px;" v-if="status==3"></span></a>
      </div>

      <!--  预约状态：0预约中，1成功，2失败，3取消 -->
      <div class="appoint-list">
        <div class="no-data" v-if="orderList.length==0">
          暂无数据
        </div>
        <div class="group" @click="bookDetails(item)" v-for="(item,index) in orderList" :key="index" v-else>
          <div class="top">
            <span class="tag tag-success" v-if="item.status==1">预约成功</span>
            <span class="tag tag-fail" v-else-if="item.status==2||item.status==3" style="background: #698196;">预约失败</span>
            <span class="time">{{item.item}}</span>
          </div>
          <div class="center">
            <h4 class="scess-title"><img src="../../../static/images/appoint/vaccine-red.png">{{item.vaccinateName||'--'}}</h4>
            <div class="center-group">
              <div><span>接种对象：</span>{{item.babyName}}</div>
              <div><span>性别：</span>{{item.sex}}</div>
            </div>
            <div class="center-group">
              <div><span>年龄：</span>{{item.age}}</div>
              <div><span>母亲姓名：</span>{{item.mother}}</div>
            </div>
            <div><span>接种时间：</span>{{item.appointinotime}}</div>
            <div><span>接种地点：</span>{{item.inoculatePointName}}</div>
          </div>
          <div class="bottom">
            <div class="left">预约号码：<span>{{item.appointserial}}</span></div>
            <div class="right">总价：<span>{{item.money}}</span></div>
          </div>
        </div>
      </div>

      <div style="height: 70px;"></div>
      <div class="home-footer">
        <div class="home-bar" @click="gohome">
          <img src="../../../static/images/home/footer-home.png">
          <p>首页</p>
        </div>
        <div class="appoint-bar active">
          <img src="../../../static/images/home/footer-appoint-select.png">
          <p>接种预约</p>
        </div>
        <div class="mine-bar" @click="goMine">
          <img src="../../../static/images/home/footer-mine.png">
          <p>我的</p>
        </div>
      </div>

    </div>
</template>

<script>
  import TopBar from '@/components/top'

    export default {
        metaInfo () {
          return {
            title: '接种预约'
          }
        },
      data(){
        return{
          topTitle:'接种预约',
          orderList:[],
          status:0,
          statusId:'',
        }
      },
      filters:{
        sexItem(val){
          let children=JSON.parse(sessionStorage.getItem('children'));
          for(let i in children){
            if(children[i].id==val.babyid){
              return children[i].sex;
            }
          }
        },
        ageItem(val){
          let children=JSON.parse(sessionStorage.getItem('children'));
          for(let i in children){
            if(children[i].id==val.babyid){
              return children[i].age;
            }
          }
        },
        montherItem(val){
          let children=JSON.parse(sessionStorage.getItem('children'));
          for(let i in children){
            if(children[i].id==val.babyid){
              return children[i].mother;
            }
          }
        }
      },
      mounted(){
        this.getData();
      },
        methods:{
          gohome(){
            this.$router.push({path: '/index'});
          },
          goMine(){
            this.$router.push({path: '/personal'});
          },
          bookDetails(val){
            if(val.status!=5){
              this.$router.push({path: '/bookeDetails', query: {id: val.id}});
            }
          },
          getData(){
            this.$api.post('/vaccinationReservation/findOrderList',{
              userid:sessionStorage.getItem('userId'),
              status:this.statusId
            }).then( (res)=> {
              if(res.data.result==0){
                 this.orderList=res.data.obj;
              }
            })
          },
          allTabAppoint(){
            this.status=0;
            this.statusId='';
            this.getData();
          },
          paymentAppoint(){
            this.status=1;
            this.getData();
          },
          successAppoint(){
            this.status=2;
            this.statusId=1;
            this.getData();
          },
          closeAppoint(){
            this.status=3;
            this.statusId='2,3';
            this.getData();
          }
        },
      components: {
        TopBar
      }
    }
</script>

<style lang="scss">
    .appointment-con{
      background: #fff;
      height: 100%;
      .tab-nav{
        display: flex;
        a{
          margin:20px 0;
          flex: 1;
          text-align: center;
          border-right: 1px solid #EEEEEE;
          display: inline-block;
          height: 30px;
          line-height: 30px;
          font-size:15px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(64,68,70,1);
          &.active{
            color:#da4a4a;
          }
          &:last-child{
            border-right: none;
          }
          .line{
            display: block;
            width:44px;
            height:1px;
            background:rgba(218,74,74,1);
            margin: 0 auto;
          }
        }
      }
      .appoint-list{
        padding:0 15px;
        .group{
          background:rgba(255,255,255,1);
          box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
          border-radius:10px;
          padding:9px 15px 18px;
          margin-bottom: 10px;
          .top{
            border-bottom: 1px solid #EEEEEE;
            padding-bottom: 9px;
            .tag{
              display: inline-block;
              height:17px;
              line-height: 17px;
              font-size:12px;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              color:rgba(255,255,255,1);
              padding:0 8px;
              &-success{
                background:rgba(245,180,110,1);
              }
              &-pay{
                background: #DA4A4A;
              }
              &-close{
                background: #698196;
              }
            }
            .time{
              font-size:12px;
              font-family:PingFang-SC-Regular;
              color:rgba(122,122,122,1);
              float: right;
              margin-top: 4px;
            }
          }
          .center{
            border-bottom: 1px solid #EEEEEE;
            h4{
              font-size:15px;
              font-family:PingFang-SC-Regular;
              color:rgba(218,74,74,1);
              margin: 15px 0;
              img{
                width:15px;
                height: 15px;
                vertical-align: middle;
                margin-right: 3px;
              }
            }
            .scess-title-one{
              color:#262626;
            }
            div{
              font-size:12px;
              font-family:PingFang-SC-Regular;
              color:#262626;
              margin-bottom: 12px;
              span{
                color:#7A7A7A;
              }
            }
            &-group{
              display: flex;
              justify-content: space-between;
            }
          }
          .bottom{
            zoom: 1;
            margin-top:17px;
            font-size:12px;
            font-family:PingFang-SC-Regular;
            color:rgba(122,122,122,1);
            &:after{
              display:block;
              clear:both;
              content:"";
              visibility:hidden;
              height:0;
            }
            .left{
              float: left;
              span{
                color:#DA4A4A;
              }
            }
            .right{
              float: right;
              span{
                color:#262626;
              }
              .goPayment{
                display: inline-block;
                text-align: center;
                width:74px;
                height:30px;
                line-height: 30px;
                border:1px solid rgba(218,74,74,1);
                border-radius:10px;
                font-size:14px;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(218,74,74,1);
              }
            }
          }
        }
      }
      .home-footer{
        position: fixed;
        bottom: 0;
        width:100%;
        box-shadow:0px -3px 10px 0px rgba(50,51,51,0.08);
        display: flex;
        text-align: center;
        padding:10px 0;
        background:rgba(255,255,255,1);
        p{
          margin-top:4px;
          font-size:10px;
          color:rgba(122,122,122,1);
        }
        .active{
          p{
            color:rgba(218,74,74,1);
          }
        }
        .home-bar{
          flex:1;
          img{
            width:23px;
            height: 20px;
          }
        }
        .appoint-bar{
          flex:1;
          img{
            width:23px;
            height: 20px;
          }
        }
        .mine-bar{
          flex:1;
          img{
            width:20px;
            height: 20px;
          }
        }
      }
      .no-data{
        font-size: 14px;
        color: #ccc;
        text-align: center;
        padding-top: 100px;
      }
    }
</style>
